@font-face {
  font-family: 'Gotham-Medium';
  src: url('/design/gotham-medium.woff2') format('woff2'),
	url('/design/gotham-medium.woff') format('woff');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham-Regular';
  src: url('/design/gothamoffice-regular.woff2') format('woff2'),
	url('/design/gothamoffice-regular.woff') format('woff');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham-Bold';
  src: url('/design/gothamoffice-bold.woff2') format('woff2'),
	url('/design/gothamoffice-bold.woff') format('woff');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham-Book';
  src: url('/design/gotham-book.woff2') format('woff2'),
	url('/design/gotham-book.woff') format('woff');
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Gotham-Regular", Arial, Helvetica, sans-serif;
}

*.medium {
  font-family: "Gotham-Medium", Arial, Helvetica, sans-serif;
}

*.regular {
  font-family: "Gotham-Regular", Arial, Helvetica, sans-serif;
}

*.bold {
  font-family: "Gotham-Bold", Arial, Helvetica, sans-serif;
}

*.book {
  font-family: "Gotham-Book", Arial, Helvetica, sans-serif;
}

.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6,
.subtitle-m,
.subtitle-s,
.body-l-bold,
.body-m-bold,
.body-s-bold,
.body-xs-bold,
.body-xxs-bold,
.menu-tabs-s,
.menu-tabs,
.button{
  font-family: "Gotham-Medium", Arial, Helvetica, sans-serif;
}

.body-l,
.body-m,
.body-s,
.body-xs,
.body-xxs {
  font-family: "Gotham-Book", Arial, Helvetica, sans-serif;
}

caption,
.caption-s,
.caption-m,
.caption-l {
  font-family: "Gotham-Bold", Arial, Helvetica, sans-serif;
}

*.medium {
  font-family: "Gotham-Medium", Arial, Helvetica, sans-serif;
}

*.regular {
  font-family: "Gotham-Regular", Arial, Helvetica, sans-serif;
}

*.bold {
  font-family: "Gotham-Bold", Arial, Helvetica, sans-serif;
}

*.book {
  font-family: "Gotham-Book", Arial, Helvetica, sans-serif;
}

.heading-2,
.heading-3,
.heading-5, .body-l, .body-l-bold, .body-s-bold{
  color: var(--color-grey-600);
}

.body-s,
.body-xs,
.body-xxs,
.body-s-bold,
.body-xs-bold  {
  color: var(--color-grey-500);
}

.heading-1 {
  font-weight: 500;
  font-size: 54px;
  line-height: 110%;
  letter-spacing: 0px;
}

.heading-2 {
  font-weight: 500;
  font-size: 42px;
  line-height: 110%;
  letter-spacing: 0px;
  margin: 0;
}

.heading-3 {
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: 0px;
  margin: 0;
}

.heading-4 {
  font-weight: 500;
  font-size: 24px;
  line-height: 110%;
  letter-spacing: 0px;
}

.heading-5 {
  font-weight: 500;
  font-size: 20px;
  line-height: 110%;
  letter-spacing: 0px;
}

.heading-6 {
  font-weight: 500;
  font-size: 18px;
  line-height: 110%;
  letter-spacing: 0px;
}

.subtitle-m {
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
  letter-spacing: 0px;
  margin: 0;
}

.subtitle-s {
  font-weight: 500;
  font-size: 14px;
  line-height: 110%;
  letter-spacing: 0px;
  margin: 0;
}

.body-l {
  font-weight: 400;
  font-size: 22px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-l-bold {
  font-weight: 500;
  font-size: 22px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-m {
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-m-bold {
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-s {
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-s-bold {
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-xs {
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-xs-bold {
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-xxs {
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-xxs-bold {
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.caption {
  font-weight: 700;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 1px;
}

.caption-s {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 1px;
}

.caption-m {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-orange-600);
  margin: 0;
}

.caption-l {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-orange-600);
  margin: 0;
}

.button-l {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0.5px;
}

.button-m {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.5px;
}

.button-s {
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.5px;
}

.menu-tabs {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
}

.menu-tabs-s {
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
}

@media (width >=768px) {

  .lg\:heading-1 {
	font-weight: 500;
	font-size: 54px;
	line-height: 110%;
	letter-spacing: 0px;
  }

  .lg\:heading-2 {
	font-weight: 500;
	font-size: 42px;
	line-height: 110%;
	letter-spacing: 0px;
	margin: 0;
  }

  .lg\:heading-3 {
	font-weight: 500;
	font-size: 32px;
	line-height: 110%;
	letter-spacing: 0px;
	margin: 0;
  }

  .lg\:heading-4 {
	font-weight: 500;
	font-size: 24px;
	line-height: 110%;
	letter-spacing: 0px;
  }

  .lg\:heading-5 {
	font-weight: 500;
	font-size: 20px;
	line-height: 110%;
	letter-spacing: 0px;
  }

  .lg\:heading-6 {
	font-weight: 500;
	font-size: 18px;
	line-height: 110%;
	letter-spacing: 0px;
  }

  .lg\:subtitle-m {
	font-weight: 500;
	font-size: 16px;
	line-height: 110%;
	letter-spacing: 0px;
  }

  .lg\:subtitle-s {
	font-weight: 500;
	font-size: 14px;
	line-height: 110%;
	letter-spacing: 0px;
  }

  .lg\:body-l {
	font-weight: 400;
	font-size: 22px;
	line-height: 140%;
	letter-spacing: 0px;
  }

  .lg\:body-m {
	font-weight: 400;
	font-size: 20px;
	line-height: 140%;
	letter-spacing: 0px;
  }

  .lg\:body-s {
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
	letter-spacing: 0px;
  }

  .lg\:body-xs {
	font-weight: 400;
	font-size: 16px;
	line-height: 140%;
	letter-spacing: 0px;
  }

  .lg\:body-xxs {
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
	letter-spacing: 0px;
  }

  .lg\:caption {
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 1px;
  }

  .lg\:caption-s {
	font-weight: 700;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 1px;
  }

  .lg\:caption-l {
	font-weight: 700;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-orange-600);
	margin: 0;
  }

  .lg\:button-l {
	font-weight: 500;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0.5px;
	padding: 1.375rem 2.5rem !important;
  }

  .lg\:button-m {
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0.5px;
	padding: 1rem 2.5rem !important;
  }

  .lg\:button-s {
	font-weight: 500;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0.5px;
	padding: 0.75rem 2rem !important;
  }

  .lg\:menu-tabs {
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0px;
  }

  .lg\:menu-tabs-s {
	font-weight: 500;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0px;
  }

  .lg\:body-s-bold {
	font-weight: 500;
	font-size: 18px;
	line-height: 140%;
	letter-spacing: 0px;
	margin: 0;
  }

  .lg\:body-m-bold {
	font-weight: 500;
	font-size: 20px;
	line-height: 140%;
	letter-spacing: 0px;
	margin: 0;
  }

  .lg\:body-l-bold {
	font-weight: 500;
	font-size: 22px;
	line-height: 140%;
	letter-spacing: 0px;
	margin: 0;
  }
}